// 变量定义
@primary-color: #C00000;
@padding: 10px;
@font-size: 32px;
@font-family : "Arial", sans-serif;

.box-shadow(@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments @color;
}

.container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    .title {
        color: @primary-color;
        font-size: @font-size;
        font-weight: 700;
        .box-shadow(2px, 2px, 10px, rgba(0, 0, 0, 0.2));
    }
}


.message { border: 1px solid #ddd; }
.success { &:extend(.message); color: green; }


/*
推荐使用 Less 的情况
  简单项目：需要轻量级预处理器，无需复杂逻辑。
  浏览器端编译：希望通过 <script> 标签直接在浏览器中使用（Less.js 支持）。
  遗留项目：维护基于 Less 的旧代码库（如 Bootstrap 4）。
  示例项目：
    个人博客
    小型营销页面
*/